<template>
  <div class="about">
    <h1>This is an about page</h1>

    <van-button type="primary" @click="changeNum"
      >更改store.state.num ++</van-button
    >
    <hr />
    <van-button type="primary" @click="changeNumDis">异步 ++</van-button>
    <hr />
    <van-button type="primary" @click="getNum">获取参数</van-button>

    <van-button type="primary" @click="getuInfo">获取用户信息</van-button>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { useRoute } from "vue-router";
import { useStore } from "vuex";

@Options({
  components: {},
})
export default class AboutView extends Vue {
  route = useRoute();
  store = useStore();
  public mounted(): void {
    console.log("query参数", this.route.query);
    console.log("params参数", this.route.params); //NULL
    console.log("Store 参数为", this.store.state);
  }

  //练习store  ++
  changeNum = (): void => {
    this.store.commit("addNum");
    console.log("Store 参数为", this.store.state.num);
  };
  changeNumDis = () => {
    this.store.dispatch("addNum");
    console.log("Store 参数为", this.store.state.num);
  };
  num: number = 0;
  getNum = (): void => {
    this.num = this.store.getters.getNum;
    console.log(this.num);
  };

  getuInfo = () => {
    console.log("store 参数", this.store);
    console.log("store 数据", this.store.state.uInfo.uname);
  };
}
</script>